import React, { Component } from 'react'

export default class Form extends Component {
    constructor(props) {
        super(props)
        this.state = {
            value: ''
        }
    }
    handleKeyUp = (e) => {
        const { add } = this.props
        if (e.key === 'Enter') {
            add(this.state.value)
            this.setState({
                value: ''
            })
        }
    }
    handleChange = (e) => {
        this.setState({
            value: e.target.value
        })
    }
    render() {
        return (
            <div>
                <input 
                    type='text' 
                    value={this.state.value}
                    onKeyUp={this.handleKeyUp}
                    onChange={this.handleChange}
                />
            </div>
        )
    }
}
